<template>
    <el-dialog title="添加信息" :visible.sync="visible" width="800px">
        <el-form :model="form" ref="networkInfoForm" label-width="160px" class="network-form">
            <!-- 网络基础信息 -->

            <el-row :gutter="20">
                <el-col v-for="(item, index) in formItems" :key="index" :span="12">
                    <el-form-item :label="item.label" :prop="item.prop">
                        <el-input v-model="form[item.prop]" clearable :placeholder="item.placeholder"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="$emit('update:visible', false)">取消</el-button>
            <el-button type="primary" @click="submitForm">提交</el-button>
        </div>
    </el-dialog>
</template>

<script>
import dayjs from 'dayjs';
export default {
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
    },
    // JS 中准备字段映射
    data() {
        return {
            form: {
                ip: '',
                port: '',
                url: '',
                service: '',
                protocol_transport: '',
                protocol_probe: '',
                protocol_application: '',
                http_title: '',
                title: '',
                webapp_name: '',
                webapp_version: '',
                webapp_url: '',
                component_name: '',
                component_version: '',
                product: '',
                version: '',
                db_name: '',
                db_version: '',
                device: '',
                system_name: '',
                system_distrib: '',
                system_release: '',
                os: '',
                system_chinese: '',
                server_name: '',
                server_version: '',
                server_chinese: '',
                waf_name: '',
                waf_version: '',
                banner: '',
                fingerprint: '',
                jarm: '',
                extrainfo: '',
                rdns: '',
                hostname: '',
                lat: '',
                lon: '',
                city_name_CN: '',
                city_name_EN: '',
                city_geoname_id: '',
                subdivisions_name_CN: '',
                subdivisions_name_EN: '',
                subdivisions_code: '',
                subdivisions_geoname_id: '',
                country_name_CN: '',
                country_name_EN: '',
                country_code: '',
                country_geoname_id: '',
                continent_name_CN: '',
                continent_name_EN: '',
                continent_code: '',
                continent_geoname_id: '',
                organization: '',
                organization_CN: '',
                isp: '',
                idc: '',
                base_station: '',
                asn: '',
                aso: '',
                keywords: '',
                description: '',
                remark: '',
                resourceType: '',
                ssl: '',
                PoweredBy: '',
                surveying_time: '',
                headers: '',
            },
            formItems: [
                { label: 'IP 地址：', prop: 'ip', placeholder: '请输入 IP 地址' },
                { label: '端口号：', prop: 'port', placeholder: '请输入端口号'},
                { label: 'URL：', prop: 'url', placeholder: '请输入 URL' },
                { label: '服务：', prop: 'service', placeholder: '请输入服务' },
                { label: '协议（传输层）：', prop: 'protocol_transport', placeholder: '请输入协议（传输层）' },
                { label: '协议探测信息：', prop: 'protocol_probe', placeholder: '请输入协议探测信息' },
                { label: '协议（应用层）：', prop: 'protocol_application', placeholder: '请输入协议（应用层）' },
                { label: 'HTTP 标题：', prop: 'http_title', placeholder: '请输入 HTTP 标题' },
                { label: '网页标题信息：', prop: 'title', placeholder: '请输入网页标题信息' },
                { label: 'Web 应用名称：', prop: 'webapp_name', placeholder: '请输入 Web 应用名称' },
                { label: 'Web 应用版本：', prop: 'webapp_version', placeholder: '请输入 Web 应用版本' },
                { label: 'Web 应用官网：', prop: 'webapp_url', placeholder: '请输入 Web 应用官网' },
                { label: '组件名称：', prop: 'component_name', placeholder: '请输入组件名称' },
                { label: '组件版本：', prop: 'component_version', placeholder: '请输入组件版本' },
                { label: '产品名称：', prop: 'product', placeholder: '请输入产品名称' },
                { label: '版本信息：', prop: 'version', placeholder: '请输入版本信息' },
                { label: '数据库名称：', prop: 'db_name', placeholder: '请输入数据库名称' },
                { label: '数据库版本：', prop: 'db_version', placeholder: '请输入数据库版本' },
                { label: '设备类型：', prop: 'device', placeholder: '请输入设备类型' },
                { label: '系统名称：', prop: 'system_name', placeholder: '请输入系统名称' },
                { label: '系统发行版：', prop: 'system_distrib', placeholder: '请输入系统发行版' },
                { label: '系统版本：', prop: 'system_release', placeholder: '请输入系统版本' },
                { label: '操作系统：', prop: 'os'   , placeholder: '请输入操作系统' },
                { label: '系统中文名：', prop: 'system_chinese', placeholder: '请输入系统中文名' },
                { label: '服务器名称：', prop: 'server_name', placeholder: '请输入服务器名称' },
                { label: '服务器版本：', prop: 'server_version', placeholder: '请输入服务器版本' },
                { label: '服务器中文名：', prop: 'server_chinese', placeholder: '请输入服务器中文名' },
                { label: 'WAF 名称：', prop: 'waf_name', placeholder: '请输入 WAF 名称' },
                { label: 'WAF 版本：', prop: 'waf_version', placeholder: '请输入 WAF 版本' },
                { label: 'Banner 信息：', prop: 'banner', placeholder: '请输入 Banner 信息' },
                { label: '指纹信息：', prop: 'fingerprint', placeholder: '请输入指纹信息' },
                { label: 'JARM 指纹：', prop: 'jarm', placeholder: '请输入 JARM 指纹' },
                { label: '额外信息：', prop: 'extrainfo', placeholder: '请输入额外信息' },
                { label: 'rdns：', prop: 'rdns', placeholder: '请输入 rdns' },
                { label: 'hostname：', prop: 'hostname', placeholder: '请输入 hostname' },
                { label: '地理纬度：', prop: 'lat', placeholder: '请输入地理纬度' },
                { label: '地理经度：', prop: 'lon', placeholder: '请输入地理经度' },
                { label: '城市（中文）：', prop: 'city_name_CN', placeholder: '请输入城市（中文）' },
                { label: '城市（英文）：', prop: 'city_name_EN', placeholder: '请输入城市（英文）' },
                { label: '城市 geoname_id：', prop: 'city_geoname_id', placeholder: '请输入城市 geoname_id' },
                { label: '行政区（中文）：', prop: 'subdivisions_name_CN', placeholder: '请输入行政区（中文）' },
                { label: '行政区（英文）：', prop: 'subdivisions_name_EN', placeholder: '请输入行政区（英文）' },
                { label: '行政区代码：', prop: 'subdivisions_code', placeholder: '请输入行政区代码' },
                { label: '行政区 geoname_id：', prop: 'subdivisions_geoname_id', placeholder: '请输入行政区 geoname_id' },
                { label: '国家（中文）：', prop: 'country_name_CN', placeholder: '请输入国家（中文）' },
                { label: '国家（英文）：', prop: 'country_name_EN', placeholder: '请输入国家（英文）' },
                { label: '国家代码：', prop: 'country_code', placeholder: '请输入国家代码' },
                { label: '国家 geoname_id：', prop: 'country_geoname_id', placeholder: '请输入国家 geoname_id' },
                { label: '大洲（中文）：', prop: 'continent_name_CN', placeholder: '请输入大洲（中文）' },
                { label: '大洲（英文）：', prop: 'continent_name_EN', placeholder: '请输入大洲（英文）' },
                { label: '大洲代码：', prop: 'continent_code', placeholder: '请输入大洲代码' },
                { label: '大洲 geoname_id：', prop: 'continent_geoname_id', placeholder: '请输入大洲 geoname_id' },
                { label: '运营组织（英文）：', prop: 'organization', placeholder: '请输入运营组织（英文）' },
                { label: '运营组织（中文）：', prop: 'organization_CN', placeholder: '请输入运营组织（中文）' },
                { label: 'ISP（运营商）：', prop: 'isp', placeholder: '请输入 ISP（运营商）' },
                { label: 'IDC 信息：', prop: 'idc', placeholder: '请输入 IDC 信息' },
                { label: '基站信息：', prop: 'base_station', placeholder: '请输入基站信息' },
                { label: 'ASN：', prop: 'asn', placeholder: '请输入 ASN' },
                { label: 'ASO：', prop: 'aso', placeholder: '请输入 ASO' },
                { label: '网站关键词：', prop: 'keywords', placeholder: '请输入网站关键词' },
                { label: '描述信息：', prop: 'description', placeholder: '请输入描述信息' },
                { label: '备注信息：', prop: 'remark', placeholder: '请输入备注信息' },
                { label: '资源类型：', prop: 'resourceType', placeholder: '请输入资源类型' },
                { label: 'SSL 信息：', prop: 'ssl', placeholder: '请输入 SSL 信息' },
                { label: 'PoweredBy：', prop: 'PoweredBy', placeholder: '请输入 PoweredBy' },
                { label: '（surveying_time）：', prop: 'surveying_time', placeholder: '请输入（surveying_time）' },
                { label: 'headers：', prop: 'headers', placeholder: '请输入 headers' }
            ]
        }
    },
    watch: {

    },
    methods: {

        submitForm() {
            this.$refs.networkInfoForm.validate((valid) => {
                if (valid) {
                    console.log('提交表单数据：', this.form);
                    this.$emit('submit-zoomeye', this.form);
                } else {
                    this.$message.error('请填写完整信息！');
                }
            });
        },
    },
};
</script>
